<!DOCTYPE html>
<html lang="zh" xmlns: xmlns: xmlns: xmlns: xmlns: xmlns:>
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
           v-for指令: 遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现.
           遍历数组语法:
             v-for="user in users";
             users:是要遍历的数组,需要在vue的data中定义好.
             user:元素别名,就是一个变量.
        -->

        <!-- div指定vue的作用范围-->
        <div id="app">

            <table>
                <tr>
                    <th>用户编号</th>
                    <th>用户名</th>
                    <th>用户性别</th>
                    <th>用户年龄</th>
                </tr>
                <!--
                 当v-for和v-if出现在一起时,v-for优先级更高.会先遍历,再判断条件.
                v-for遍历取值  语法：对象 in 对象数组    index：迭代到的当前元素索引，从0开始
                就是给数据加上索引, 从0开始
                如果index%2!=0索引是从0开始的.上展示编号135 下面展示编号24
                -->
                <tr v-for="(user,index) in users" :key="index" v-if="index%2!=0">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.gender}}</td>
                    <td>{{user.age}}</td>
                </tr>
                <tr v-else>
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.gender}}</td>
                    <td>{{user.age}}</td>
                </tr>
            </table>


        </div>
</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data:{//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,
            users:[
                {name:'小S', gender:'女', age: 21},
                {name:'蔡徐坤', gender:'男', age: 23},
                {name:'大S', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        },

    });

</script>
</html>